import React from "react";
import {Table, Spin} from 'antd';
import styles from "./index.module.scss";
import {ColumnsType} from "antd/lib/table/interface";
import {TableRowSelection} from "antd/es/table/interface";
import {PageResponse} from "@/common/interfaces";

interface IProTableProps {
  loading?: boolean
  pageResponse: PageResponse
  onChange?: (page: number, pageSize: number) => void;
  columns?: ColumnsType<any>;
  toolBar?: React.ReactNode
  children?: any
  rowSelection?: TableRowSelection<any>;
  scroll?: any
}

const ProTable: React.FC<IProTableProps> = (props) => {

  const {loading, pageResponse, onChange, columns, toolBar, children, rowSelection, scroll} = props

  return (
    <div className={styles.container}>
      {toolBar && (<div className={styles.toolBar}>{toolBar}</div>)}
      <Spin spinning={loading}>
        <Table
          rowKey={"id"}
          columns={columns}
          rowSelection={rowSelection}
          dataSource={pageResponse.data || []}
          scroll={scroll}
          pagination={{
            current: pageResponse.pageInfo?.page || 0,
            pageSize: pageResponse.pageInfo?.size || 10,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: ["10", "20", "30"],
            total: pageResponse.pageInfo?.total || 0,
            showTotal: (total) => `共 ${total} 条`,
            onChange: onChange
          }}
        />
        {children}
      </Spin>
    </div>
  )
}

export default ProTable
